<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./lib/axios.js"></script>
    <script src="./lib/vue.js"></script>
    <script src="./lib/elementui.js"></script>
    <link rel="stylesheet" href="./lib/elementui.css">
    <title>Document</title>
</head>

<body>
    <!-- vue指令 -->
    <!-- v-mode 数据双向绑定 -->
    <!-- v-bind 数据绑定 -->
    <!-- v-on 事件 -->
    <div id="loginPage">
        <h3>用户登录</h3>
        <p>
            <el-input placeholder="请输入登录账号" v-model="userNo">
                <template slot="prepend">账号</template>
            </el-input>
        </p>
        <p>
            <el-input placeholder="请输入登录密码" v-model="password" show-password>
                <template slot="prepend">密码</template>
            </el-input>
        </p>
        <p>
            <el-checkbox v-model="remMe">记住我</el-checkbox>
        </p>
        <p>
            <el-button type="primary" v-on:click="login">登录</el-button>
            <el-button type="info" v-on:click="back">返回</el-button>
        </p>
    </div>
</body>
<script>
    // var vDom = {
    //     tag:"div",
    //     attrs:[
    //         {
    //             attr:"id",
    //             value:"loginPage"
    //         }
    //     ],
    //     children:[
    //         {
    //             tag:"h3",
    //             children:[
    //                 {},
    //                 "用户登录"
    //             ]
    //         }
    //     ]
    // }
    //委托就是用一个变量接收一个函数（方法）
    // function func(){
    //     console.log("Hi Ace");
    // }
    // var funcvalue = func;
    // funcvalue();

    var vm = new Vue({
        el: "#loginPage",
        data: {
            userNo: "",
            password: "",
            remMe: false,
        },
        mounted() {
            var userInfo =JSON.parse(localStorage["userInfo"]) ;
            this.userNo = userInfo.userNo;
            this.password = userInfo.password;
            this.remMe =  localStorage["isRem"]=="true"?true:false;
        },
        methods: {
            login: function () {
                var userInfo = {
                    userNo:"",
                    password:""
                };
                var userNo = this.userNo;
                var pwd = this.password;
                var remMe = this.remMe;
               
                // axios.get("http://localhost:5000/Login/"+userNo+"/"+password).then(function(res){
                //     console.log(res);
                // })
                axios.get(`http://localhost:5000/Login/${userNo}/${pwd}/`).then(function (res) {
                    localStorage["token"] = res.data.token;
                    sessionStorage['username'] = res.data.userName;
                    localStorage["isRem"] = remMe;
                    if (remMe) {
                        userInfo.userNo = userNo;
                        userInfo.password = res.data.autoLoginTag;
                        localStorage["userInfo"] = JSON.stringify(userInfo);
                    } else {
                        localStorage.removeItem("userInfo");
                    }
                    location.href = "postlist.html";
                })
            },
            back: function () {
                history.go(-1);
            }
        },
    })
</script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #loginPage {
        width: 586px;
        height: 300px;
        box-shadow: 0 0 10px #666;
        margin: auto;
        margin-top: 10%;
    }

    #loginPage h3 {
        text-align: center;
        padding: 16px 0;
    }

    #loginPage p {
        width: 80%;
        margin: auto;
        margin-bottom: 20px;
    }

    #loginPage p:last-child {
        text-align: center;
    }

    #loginPage p button {
        width: 48%;

    }
</style>

</html>